<template>
  <div >
    <el-row :gutter="5">
      <el-col :span="12" :xs="24">
        <el-table
          :key="tableKey"
          ref="price-alloc"
          :loading="listLoading"
          :data="list"
          border
          show-summary
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="支付方式" prop="payment_channel">
            <template v-slot="{row}">
              <span>{{ row.payment_channel }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付笔数" prop="payment_count">
            <template v-slot="{row}">
              <span>{{ row.payment_count }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付金额(元)" prop="payment_amount">
            <template v-slot="{row}">
              <span>{{ row.payment_amount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="退费笔数" prop="refund_count">
            <template v-slot="{row}">
              <span>{{ row.refund_count }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="退费金额(元)" prop="refund_amount">
            <template v-slot="{row}">
              <span>{{ row.refund_amount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="小计(元)" prop="summary">
            <template v-slot="{row}">
              <span>{{ row.summary.toFixed(2)  }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <div ref="barChart" style="width: 100%; height: 400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {financeRevenueReport} from "@/api/analysis";
import echarts from 'echarts'
import moment from "moment";
import {fetchPayments} from "@/api/finance";
import {exportExcel} from "@/utils/excel";
import {getPaymentChannelText} from "@/utils";
export default {
  name: 'RevenueReport',
  props: {
    date: {
      type: Array,
      required: true,
    },
    code: {
      type: String,
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      tableKey: 0,
      listLoading: false,
      chart:null
    };
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        val = val || []
        this.setOptions(val)
      }
    },
    date: 'fetchData',
    code: 'fetchData'
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchData()
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.barChart);
      this.setOptions()
    },
    setOptions(){
      this.list = this.list || []
      const channels = this.list.map(item => item.payment_channel);
      const amounts = this.list.map(item => item.payment_amount);
      this.chart.setOption({
        title:{
          'text':'营收统计',
          left: 'center', // 设置标题居中
          textAlign: 'center' // 设置文本对齐方式
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [{
          type: 'category',
          data: channels
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: {
          name: '营收统计',
          data:amounts,
          type: 'bar',
          showBackground: true,
          itemStyle: {
            color: '#4CAF50' // 设置柱子颜色为绿色
          },
          barWidth: '50%',
        }
      })
    },
    fetchData() {
      if (this.date.length > 0) {
        this.listLoading = true
        this.fetchRevenueReport(this.date,this.code);
      }
    },
    fetchRevenueReport(date, code) {
     const query =  {
       start: date[0],
       end: date[1],
       code: code,
       is_contains_sub: true
      }
      financeRevenueReport(query).then(res => {
         if (res.code === 20000) {
           this.list = res.data.list;
           this.total = res.data.total;
         }
         this.listLoading = false
      })
    },
    exportData() {
      let query =  {
        start_date: this.date[0],
        end_date: this.date[1],
        page:1,
        pageSize:9999,
        code: this.code,
        is_contains_sub: false
      }
      fetchPayments(query).then(res => {
        if (res.code === 20000) {
          const headers = ['姓名','地址','表号','户号','缴费类型','缴费渠道','缴费单据号','金额','缴费时间']
          const data = res.data.list.map(item => ({
            姓名: item.device ? (item.device.customer ? item.device.customer.customer_name : '-') : '-',
            地址: item.device ? item.device.install_address : '-',
            表号: item.device ? item.device.terminal_number : '未知',
            户号: item.device ? (item.device.customer ? item.device.customer.refer_number : '未知') : '未知',
            缴费类型: item.type === 1 ? '缴费':'退费',
            缴费渠道: getPaymentChannelText(item.method),
            缴费单据号: item.payment_sn,
            金额: item.real_amount,
            缴费时间: moment(item.create_date).format('YYYY-MM-DD'),
          }))
          exportExcel(data, headers, '营收明细')
        }
      })
    }
  }
};
</script>
